<template>
  <div class="material-management">
    <!-- 顶部 -->
    <div class="header">
      <div>
        <h2>物料管理</h2>
        <div class="desc">管理和跟踪所有物料库存、状态和详情</div>
      </div>
      <div>
        <el-button style="background-color: #253963; color: #fff;" @click="addDialogVisible = true">添加物料</el-button>
      </div>
    </div>

    <!-- 筛选区 -->
    <el-form :inline="true" class="filter-bar" @submit.prevent>
      <el-form-item>
        <el-input v-model="filters.name" placeholder="输入物料名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="filters.category" placeholder="物料类别" clearable style="width: 140px">
          <el-option label="电子元件" value="电子元件" />
          <el-option label="办公材料" value="办公材料" />
          <el-option label="已耗材" value="已耗材" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="filters.status" placeholder="库存状态" clearable style="width: 140px">
          <el-option label="所有状态" value="" />
          <el-option label="正常" value="正常" />
          <el-option label="低库存" value="低库存" />
          <el-option label="缺货" value="缺货" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="background-color: #253963; color: #fff;" @click="handleFilter">筛选</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">总物料种类</div>
        <div class="stat-value">1,248</div>
        <div class="stat-footer green">↑ 12% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">低库存物料</div>
        <div class="stat-value">86</div>
        <div class="stat-footer orange">↓ 5% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">今日入库</div>
        <div class="stat-value">42</div>
        <div class="stat-footer green">↑ 8% 较昨日</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">今日出库</div>
        <div class="stat-value">35</div>
        <div class="stat-footer red">↓ 3% 较昨日</div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <!-- PC端表格 -->
      <div class="desktop-table" v-if="!isMobileView">
        <el-table
          :data="pagedTableData"
          border
          style="width: 100%; margin-top: 20px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="物料名称" min-width="120" />
          <el-table-column prop="code" label="物料编码" min-width="100" />
          <el-table-column prop="model" label="规格型号" min-width="120" />
          <el-table-column prop="category" label="类别" min-width="100" />
          <el-table-column prop="stock" label="库存数量" min-width="100" />
          <el-table-column prop="status" label="库存状态" min-width="80">
            <template #default="{ row }">
              <el-tag
                :type="row.status === '正常' ? 'success' : row.status === '低库存' ? 'warning' : 'danger'"
                disable-transitions
              >
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="最近更新" min-width="120" />
        </el-table>
      </div>
      
      <!-- 移动端卡片列表 -->
      <div class="mobile-cards" v-else>
        <div v-for="(item, index) in pagedTableData" :key="index" class="mobile-card">
          <div class="mobile-card-header">
            <span class="mobile-card-title">{{ item.name }}</span>
            <el-tag
              :type="item.status === '正常' ? 'success' : item.status === '低库存' ? 'warning' : 'danger'"
              size="small"
            >
              {{ item.status }}
            </el-tag>
          </div>
          <div class="mobile-card-body">
            <div class="mobile-card-item">
              <span class="mobile-card-label">物料编码:</span>
              <span class="mobile-card-value">{{ item.code }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">规格型号:</span>
              <span class="mobile-card-value">{{ item.model }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">类别:</span>
              <span class="mobile-card-value">{{ item.category }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">库存数量:</span>
              <span class="mobile-card-value">{{ item.stock }}</span>
            </div>
            <div class="mobile-card-item">
              <span class="mobile-card-label">最近更新:</span>
              <span class="mobile-card-value">{{ item.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[5, 8, 10]"
      :layout="isMobileView ? 'prev, pager, next' : 'total, sizes, prev, pager, next'"
      style="margin: 20px 0; text-align: right"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />

    <el-dialog v-model="addDialogVisible" title="添加物料" width="400px">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="80px">
        <el-form-item label="物料名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="物料编码" prop="code">
          <el-input v-model="addForm.code" />
        </el-form-item>
        <el-form-item label="规格型号" prop="model">
          <el-input v-model="addForm.model" />
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="addForm.category" placeholder="请选择">
            <el-option label="电子元件" value="电子元件" />
            <el-option label="办公材料" value="办公材料" />
            <el-option label="已耗材" value="已耗材" />
            <el-option label="物料/五金" value="物料/五金" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量" prop="stock">
          <el-input v-model="addForm.stock" />
        </el-form-item>
        <el-form-item label="库存状态" prop="status">
          <el-select v-model="addForm.status" placeholder="请选择">
            <el-option label="正常" value="正常" />
            <el-option label="低库存" value="低库存" />
            <el-option label="缺货" value="缺货" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddMaterial">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { getWu, addWu, queryUserByMultiConditions } from '@/utils/api'

// 检测是否为移动端视图
const windowWidth = ref(window.innerWidth)
const isMobileView = computed(() => windowWidth.value < 768)

// 监听窗口大小变化
const handleResize = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

const filters = ref({
  name: '',
  category: '',
  status: ''
})

const tableData = ref([])
const getData=async()=>{
  tableData.value =await getWu()
  pagination.value.total=tableData.value.length
  
}


onBeforeMount(()=>{
  getData()
  
  
})



const pagination = ref({
  page: 1,
  pageSize: 5,
  total: 0
})

const pagedTableData = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return tableData.value.slice(start, end)
})

const handleFilter =async () => {
  getWu()
  tableData.value=await queryUserByMultiConditions(filters.value)  
  
}

const handleSelectionChange = (val: any) => {
  // 多选操作
}



const handlePageChange = (page: number) => {
  pagination.value.page = page
}

const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  pagination.value.page = 1 // 切换每页条数时回到第一页
}

const addDialogVisible = ref(false)
const addFormRef = ref()
const addForm = reactive({
  name: '',
  code: '',
  model: '',
  category: '',
  stock: '',
  status: ''
})
const addRules = {
  name: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
  code: [{ required: true, message: '请输入物料编码', trigger: 'blur' }],
  category: [{ required: true, message: '请选择类别', trigger: 'change' }],
  stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
  status: [{ required: true, message: '请选择库存状态', trigger: 'change' }]
}

const handleAddMaterial =async () => {
  await addWu(addForm)
  getData()
  addDialogVisible.value = false
  
}
</script>

<style scoped>
.material-management {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 32px 24px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}
.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.header .desc {
  color: #888;
  font-size: 14px;
  margin-top: 4px;
}
.filter-bar {
  background: #fff;
  padding: 18px 18px 0 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px #0001;
}
.stats-cards {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  box-shadow: 0 2px 8px #0001;
}
.stat-title {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}
.stat-footer {
  font-size: 13px;
}
.stat-footer.green { color: #1bc47d; }
.stat-footer.orange { color: #ff9900; }
.stat-footer.red { color: #f56c6c; }

/* 移动端适配样式 */
@media (max-width: 992px) {
  .stats-cards {
    flex-wrap: wrap;
  }
  
  .stat-card {
    flex: 0 0 calc(50% - 9px);
  }
}

@media (max-width: 768px) {
  .material-management {
    padding: 16px;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header h2 {
    font-size: 20px;
  }
  
  .filter-bar {
    padding: 12px 12px 0 12px;
  }
  
  .stats-cards {
    gap: 12px;
  }
  
  .stat-card {
    padding: 12px 16px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  :deep(.el-input) {
    width: 100%;
  }
  
  :deep(.el-select) {
    width: 100% !important;
  }
  
  :deep(.el-button) {
    width: 100%;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .material-management {
    padding: 12px;
  }
  
  .stat-card {
    flex: 0 0 100%;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .stat-footer {
    font-size: 12px;
  }
  
  :deep(.el-table) {
    font-size: 12px;
  }
  
  :deep(.el-pagination) {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.mobile-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.mobile-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.mobile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f9fafc;
  border-bottom: 1px solid #ebeef5;
}

.mobile-card-title {
  font-weight: 600;
  font-size: 15px;
  color: #303133;
}

.mobile-card-body {
  padding: 12px 16px;
}

.mobile-card-item {
  display: flex;
  margin-bottom: 8px;
}

.mobile-card-item:last-child {
  margin-bottom: 0;
}

.mobile-card-label {
  color: #909399;
  font-size: 13px;
  width: 80px;
  flex-shrink: 0;
}

.mobile-card-value {
  color: #303133;
  font-size: 13px;
}
</style>